<script>
import { reactive , ref  } from "vue";
import {  useRouter } from "vue-router";
export default {
  setup() {
    let data = reactive({
        text:""
    });
    const fileList = ref([

    ]);
    let router = useRouter();
    let back = () =>{
        router.push("/shelf");
    }
    let max = () =>{
        if(data.text.length>=400){
            data.text=data.text.substr(0,400)
            return 400
        }
        return data.text.length == 0?400:400-data.text.length
    }
    let add = () =>{
        console.log(fileList.value[0]);
        var com=JSON.parse(window.localStorage.getItem("comment"))
        com.unshift({
          id:2,
          time:"2021-12-09",
          text:data.text,
          comment:[],
          like:0,
          name:"23uyy",
          src:"../assets/imgs/rose.webp",
          img:[]
        })
        window.localStorage.setItem("comment",JSON.stringify(com))
        router.push("/shelf");
    }
    return {
      data,
      back,
      fileList,
      max,
      add
    };
  },
};
</script>

<template>
    <div class="say">
        <div class="container">
            <header>
                <i @click="back"></i>
                <div @click="add" :class="['btn',data.text.length>0?'con':'']">发表</div>
            </header>
            <div class="imgbox">
                <van-uploader v-model="fileList" multiple />
            </div>
            <div class="inpbox">
                <textarea placeholder="发表评论..." v-model="data.text"></textarea>
                <span>{{max()}}/400</span>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.say{
    header{
        display: flex;
        justify-content: space-between;
        padding: 10px 14px;
        i{
            display: block;
            width: 20px;
            height: 20px;
            background: url(../assets/imgs/top.png) no-repeat;
            background-size: 100%;
        }
        .btn{
            width: 50px;
            height: 25px;
            border-radius: 12px;
            background-color: #f9d1bc;
            font-size: 12px;
            line-height: 25px;
            text-align: center;
            color: white;
        }
        .btn.con{
            background-color: #f96825;
        }
    }
    .imgbox{
        width: 71%;
        margin: 0 auto;
        margin-top: 20px;
    }
    .inpbox{
        position: relative;
        width: 100%;
        textarea{
            display: block;
            width: 71%;
            height: 400px;
            border: none;
            background-color: #fff;
            margin: 0 auto;
        }
        span{
            position: absolute;
            bottom: -18px;
            right: 58px;
            font-size: 14px;
            color: #999;
        }
    }
}
</style>